<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0 minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>多选题</title>
    <link href="public/css/header.css" rel="stylesheet" type="text/css">
    <link href="public/css/container.css" rel="stylesheet" type="text/css">
    <link href="public/css/question.css" rel="stylesheet" type="text/css">
    <link href="public/css/call_back.css" rel="stylesheet" type="text/css">
    <script src="../public/jQuery/jQuery-2.1.3.min.js"></script>
    <script src="../public/js/publicjs.js"></script>
    <script src="public/js/myjs/whole.js"></script>
    <style>
        .div_sure{
            position: relative;
            margin-top:26vh;
        }
        .call_back{
            margin-top: 0vh;
            padding-top: 0vh;
        }
    </style>
</head>
<body  style="background: #EDF0F0;">

<header>
    <div class="header__box tl">
        <img onclick="goback()" src="public/img/basic/back.png" />
        <span onclick="goback()" class="back">返回</span>
    </div>
    <div class="header__box tc header__box__title">
        多选题
    </div>

    <div class="call_back">
        <div class="content_big">
            <div class="title_up">
                <div class="le">
                    不限
                </div>
                <div class="ri">
                    <img src="public/img/upper_limit_off.png">
                </div>
            </div>
            <div class="title_up">
                <div class="le">
                    2
                </div>
                <div class="ri">
                    <img src="public/img/upper_limit_off.png">
                </div>
            </div>
            <!--<div class="title_up">-->
                <!--<div class="le">-->
                   <!--3-->
                <!--</div>-->
                <!--<div class="ri">-->
                    <!--<img src="public/img/upper_limit_off.png">-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="title_up">-->
                <!--<div class="le">-->
                    <!--4-->
                <!--</div>-->
                <!--<div class="ri">-->
                    <!--<img src="public/img/upper_limit_off.png">-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="title_up">-->
                <!--<div class="le">-->
                    <!--5-->
                <!--</div>-->
                <!--<div class="ri">-->
                    <!--<img src="public/img/upper_limit_off.png">-->
                <!--</div>-->
            <!--</div>-->

        </div>
    </div>

    <div class="pop-up">
    </div>

</header>
<section>
    <div class="text_div_sub_title">
        题目标题
    </div>
    <div class="text_div_input">
        <input id="question_body" class="input_title" type="text" placeholder="请输入题目名称（必填），最多20字"/>
        <div style="width: 100%;height: 1px;background: #E5E5E5;position: relative;"></div>
        <div class="div_img_title">
            <img onclick="pic_func();" src="public/img/subject/camera.png">
            <form name="form" id="form" hidden>
                <input type="file" name="pic" class="pic" id="pic" multiple="multiple">
            </form>
            <!--<input type="file"  name="pic" id="pic" accept="image/*" style="display: none;">-->
        </div>

        <div class="div_img_img">

        </div>
        <div style="clear: both;">

        </div>

    </div>
    <div class="text_div_option">
        选项
    </div>
    <div class="option">
        <!--<div class="option_div">-->
            <!--<input class="question_option" type="text" placeholder="请输入选项名称"/>-->
        <!--</div>-->
        <!--<div class="option_div">-->
            <!--<input class="question_option" type="text" placeholder="请输入选项名称"/>-->
        <!--</div>-->
        <div class="add_option">
            <div class="add_option_div">
                <img onclick="addoption_func()" src="public/img/subject/add_option.png">
            </div>
            <div class="add_option_click" onclick="addoption_func()">
                添加选项
            </div>
            <div style="clear: both;">
            </div>
        </div>
    </div>

    <div class="setting_text">
        设置
    </div>
    <div class="div_setting_is_ness1">

        <div class="must_choose">
            最多选择
        </div>
        <div class="score_limit" data-select_limit="0" onclick="choose_limit();">
            不限
        </div>

        <div style="position: relative;">
            <div class="text_setting_is_ness">
                此题目可跳过不答
            </div>

            <div class="setting">
                <img src="public/img/subject/choose-off.png" data-ischoose="1" class="multi-img" id="must-cho">
            </div>
        </div>

    </div>
    <div class="div_sure">

        <div onclick="submit();" class="div_sure_click">
            确定
        </div>

    </div>

    <input type="hidden" id="questionnaire_id" />
    <input type="hidden" id="sequence" />
    <input type="hidden" id="question_type" value="1" />
    <input type="hidden" id="question_id" value="0" />
    <input type="hidden" id="questionnaire_name" value="0" />
    <input type="hidden" id="questionnaire_welcome" value="0" />
    <input type="hidden" id="type" value="0" />
</section>
</body>
</html>
<script>

    $(function(){
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        };

        //进入页面,首先拿到传过来的questionnaire_id
        var questionnaire_id = $.getUrlParam('questionnaire_id');

        var sequence = $.getUrlParam('sequence');
        //问题id
        var question_id = $.getUrlParam('question_id');

        var questionnaire_name = unescape($.getUrlParam('questionnaire_name'));
        var questionnaire_welcome =unescape($.getUrlParam('questionnaire_welcome'));
        var type = $.getUrlParam('type');
        $("#type").val(type);

        //保存标题和欢迎词
        $('#questionnaire_name').val(questionnaire_name);
        $('#questionnaire_welcome').val(questionnaire_welcome);

        $("#questionnaire_id").val(questionnaire_id);

        $("#sequence").val(sequence);

        $("#question_id").val(question_id);

        //编辑的话先请求
        if(question_id==-1){
            var question_options_html="";
            for(var j=0;j<2;j++){
                question_options_html+='<div class="option_div">'+
                        '<input class="question_option" type="text" placeholder="请输入选项名称"/>'+
                        '</div>';
            }
            $('.add_option').before(question_options_html);
        }
        else{

            API_Func('/questionnaires/questionnaireQuestion/'+question_id,'GET',{id:question_id},true,function(){

            },function(d){
                var data= d.data;

                //图片
                var imgs_array =[];
                var imgs_html="";

                if(data.question_img!=""){

                    imgs_array=data.question_img.split(',');

                    for(var i=0;i<imgs_array.length;i++){
                        imgs_html+='<div><img class="img_up" src="'+imgs_array[i]+'">' +
                                '<img class="red_delete" src="public/img/subject/redDelete.png"/>'+
                                '</div>';
                    }
                }
                if(imgs_html==""){

                }
                else {
                    $('.div_img_img').append(imgs_html);
                }

                //标题
                var title= INPUTEncode(data.question_body);
                $('#question_body').val(title);

                //选项
                var question_options_array=data.question_options.split(',');
                var question_options_html="";
                for(var j=0;j<question_options_array.length;j++){
                    question_options_html+='<div class="option_div">'+
                            '<input class="question_option desc" value="'+question_options_array[j]+'" type="text" placeholder="请输入选项名称"/>'+
                            '</div>';
                }
                $('.add_option').before(question_options_html);

                //是否必须
                var is_necessary=data.is_necessary;
                var must_cho=$("#must-cho");
                if(is_necessary==0){
                    must_cho.attr('data-ischoose','0');
                    must_cho.attr('src','public/img/subject/choose-on.png');
                }
                else {
                    must_cho.attr('data-ischoose','1');
                    must_cho.attr('src','public/img/subject/choose-off.png');
                }

                var select_limit=data.select_limit;
                //限制
                $(".score_limit").attr('data-select_limit',select_limit);

                if(select_limit==0){
                    $(".score_limit").html("不限");
                }
                else {
                    $(".score_limit").html(select_limit);
                }
                chooselimit=$('.score_limit').html();

                //删除图片
                $('.red_delete').unbind('click').on('click',function(){
                    var _self=$(this);
                    _self.parent().remove();
                });
            });

        }

    });

    $("#must-cho").click(function(){
        var ischoose= $(this).attr('data-ischoose');
        if(ischoose==0){
            $(this).attr('data-ischoose','1');
            $(this).attr('src','public/img/subject/choose-off.png');
        }
        else {
            $(this).attr('data-ischoose','0');
            $(this).attr('src','public/img/subject/choose-on.png');
        }
    });
    function addoption_func(){
        var html='';
        html+=' <div class="option_div">'+
                '<input class="question_option desc" type="text" placeholder="请输入选项名称"/>'+
                '</div>';
        $('.add_option').before(html);
        $(".question_option").last().focus();
    }

    function submit(){

        //问卷id
        var questionnaire_id = $("#questionnaire_id").val();

        //排序
        var sequence = $("#sequence").val();

        //是否必填
        var is_necessary=$('#must-cho').attr('data-ischoose');

        //问题主干
        var question_body=$('#question_body').val();

        //图片
        var question_img='';
        $('.div_img_img div .img_up').each(function(){
            if($(this).attr('src')!=""){
                question_img+=$(this).attr('src')+',';
            }
        });
        question_img=question_img.substr(0,question_img.length-1);

        //标题不能为空
        var pop_up=$('.pop-up');

        //选项
        var question_options='';

        $('.option_div .question_option').each(function(){

            var optionval = $(this).val().trim();

            if(optionval!=''){

                question_options+=optionval+',';

            }
        });

        question_options=question_options.substr(0,question_options.length-1);

        if(question_body==''){
            pop_up_fn(pop_up,'标题不能为空');
            return;
        }

        if(question_body.length>20){
            pop_up_fn(pop_up,'标题不能超过20字');
            return;
        }

        var question_options_arr = question_options.split(',');

        if(question_options==''){
            pop_up_fn(pop_up,'选项不能为空');
            return;
        }
        if(question_options_arr.length<2){
            pop_up_fn(pop_up,'选项至少添加两个');
            return;
        }
        var istrue=true;
        for(var i=0;i<question_options_arr.length;i++){
            if(question_options_arr[i].length>20){
                pop_up_fn(pop_up,'选项不能超过20字');
                istrue=false;
                break;
            }
        }
        if(!istrue){
            return;
        }
        //题目类型
        var question_type=$('#question_type').val();

        //最多选择
        var select_limit = $('.score_limit').attr('data-select_limit');

        question_body=HTMLEncode(question_body);
        question_options=HTMLEncode(question_options);

        var data={
            is_necessary:is_necessary,
            question_body:question_body,
            question_img:question_img,
            question_options:question_options,
            question_type:question_type,
            mark_limit:"0",
            select_limit:select_limit,
            rows:"0",
            sequence:sequence
        };

        var jsonString=JSON.stringify(data);

        var question_id = $("#question_id").val();
        //如果问题ID为-1的话做添加操作
        if(question_id==-1){
            API_Func('/questionnaires/'+questionnaire_id+'/addQuestion','POST',{jsonString:jsonString},false,function(){
                $('.div_sure_click').text('正在添加...');
            },function(d){
                $('.div_sure_click').text('确定');

                if(d.code==0){
                    pop_up_fn(pop_up,'添加成功');
                    back_edit();
//                    setTimeout("location.href='edit.html?questionnaire_id='+$('#questionnaire_id').val()",1000);
                }

                else {
                    pop_up_fn(pop_up,'添加失败');
                }
            });
        }
        else {
            API_Func('/questionnaires/questionnaireQuestion/'+question_id,'PUT',{id:question_id,jsonString:jsonString},false,function(){
                $('.div_sure_click').text('正在修改...');
            },function(d){
                $('.div_sure_click').text('确定');

                if(d.code==0){
                    pop_up_fn(pop_up,'修改成功');
                    back_edit();
                }
                else {
                    pop_up_fn(pop_up,'修改失败');
                }
            });
        }


    }

    function pic_func(){
        $('#pic').click();
    }

    var chooselimit='不限';
    function choose_limit(){
        var option_div_count=$('.option_div').length;

        var html='';
        for(var i=1;i<=option_div_count;i++){
            if(i==1){
                html+=' <div class="title_up">'+
                        '<div class="le">'+'不限'+
                        '</div>'+
                        '<div class="ri">';
                if(chooselimit=="不限"){
                    html+= '<img src="public/img/upper_limit_on.png">'+
                            '</div>'+
                            '</div>';
                }
                else {
                    html+= '<img src="public/img/upper_limit_off.png">'+
                            '</div>'+
                            '</div>';
                }

            }
            else {

                html+=' <div class="title_up">'+
                        '<div class="le">'+
                        i+
                        '</div>'+
                        '<div class="ri">';
                if(chooselimit==i){
                    html+= '<img src="public/img/upper_limit_on.png">'+
                            '</div>'+
                            '</div>';
                }
                else{
                    html+= '<img src="public/img/upper_limit_off.png">'+
                            '</div>'+
                            '</div>';
                }

            }
        }
        $('.content_big').empty().append(html);
        var padding_top='';
        if(option_div_count<=10){
            padding_top=(100-option_div_count*7.8125)/2;
        }
        else {
            padding_top=(100-10*7.8125)/2;
        }
        $('.call_back').css('padding-top',padding_top+'vh').css('display','block');

    }


    $(document).on('click','.content_big .title_up',function(){
//       var limit= $(this).parent().prev().html().trim();
//        $('.ri img').attr('src','public/img/upper_limit_off.png');
//        $(this).attr('src','public/img/upper_limit_on.png');

        var limit= $(this).children('.le').html().trim();
        $('.content_big .title_up').children('.ri').next('img').attr('src','public/img/upper_limit_off.png');
        $(this).children('.ri').next('img').attr('src','public/img/upper_limit_on.png');

        $('.call_back').css('display','none');
        chooselimit=limit;
        $('.score_limit').html(limit);
        if(limit==="不限"){
            $('.score_limit').attr('data-select_limit',0);
        }
        else {
            $('.score_limit').attr('data-select_limit',limit);
        }
    });
    function back_edit(){

        setTimeout("b();",1000);
    }
    function b(){
        var questionnaire_name= $('#questionnaire_name').val();
        var questionnaire_welcome= $('#questionnaire_welcome').val();
        var questionnaire_id = $('#questionnaire_id').val();
        var typeUrl = $("#type").val();
        location.href = 'edit.html?questionnaire_id=' + questionnaire_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome) + "&type=" + typeUrl;
    }

    $('.call_back').click(function(){
        $(this).hide();
    });

    $(document).on('focus','.question_option',function(e){

        var top = e.target.offsetParent.offsetTop;

        if(top>160){
            window.scrollTo(0,948);
        }
    });


</script>